<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录功能测试 - Login Function Test</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#334155',
            success: '#10B981',
            warning: '#F59E0B',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              800: '#333333'
            }
          }
        }
      }
    }
  </script>
  
  <style>
    .btn-primary {
      @apply bg-primary text-white px-4 py-2 rounded-md transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .input-error {
      @apply border-red-300 focus:border-red-500 focus:ring-red-200;
    }
    .input-success {
      @apply border-green-300 focus:border-green-500 focus:ring-green-200;
    }
    .fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }
    .slide-up {
      animation: slideUp 0.3s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>

<body class="bg-neutral-100 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
    <div class="text-center mb-8">
      <h1 class="text-2xl font-bold text-primary mb-2">登录功能测试</h1>
      <p class="text-neutral-600">Login Function Test</p>
    </div>

    <!-- 测试用的登录表单 -->
    <form id="login-form" novalidate>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-neutral-700 mb-2">
          <i class="fa fa-envelope text-neutral-400 mr-1"></i>
          邮箱地址 / Email
        </label>
        <input 
          type="email" 
          id="email" 
          name="email"
          required
          autocomplete="email"
          class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"
          placeholder="admin@example.com"
          value="admin@example.com"
        >
        <div id="email-error" class="text-red-500 text-sm mt-1 hidden"></div>
      </div>

      <div class="mb-4">
        <label for="password" class="block text-sm font-medium text-neutral-700 mb-2">
          <i class="fa fa-lock text-neutral-400 mr-1"></i>
          密码 / Password
        </label>
        <div class="relative">
          <input 
            type="password" 
            id="password" 
            name="password"
            required
            autocomplete="current-password"
            class="w-full px-3 py-2 pr-10 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"
            placeholder="admin123456"
            value="admin123456"
          >
          <button 
            type="button" 
            id="toggle-password"
            class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-600 transition-colors"
          >
            <i class="fa fa-eye"></i>
          </button>
        </div>
        <div id="password-error" class="text-red-500 text-sm mt-1 hidden"></div>
      </div>

      <div class="mb-6">
        <label class="flex items-center cursor-pointer">
          <input 
            type="checkbox" 
            id="remember-me" 
            name="rememberMe"
            class="rounded border-neutral-300 text-primary focus:ring-primary/30 focus:ring-2"
          >
          <span class="ml-2 text-sm text-neutral-600">记住我 / Remember me</span>
        </label>
      </div>

      <button 
        type="submit" 
        id="login-btn"
        class="w-full btn-primary py-3 text-lg font-medium relative overflow-hidden"
      >
        <span id="login-btn-text">登录 / Login</span>
        <div id="login-btn-loading" class="absolute inset-0 flex items-center justify-center hidden">
          <i class="fa fa-spinner fa-spin mr-2"></i>
          登录中... / Logging in...
        </div>
      </button>

      <div id="form-error" class="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm hidden">
        <i class="fa fa-exclamation-circle mr-1"></i>
        <span id="form-error-message"></span>
      </div>
    </form>

    <!-- 测试结果显示 -->
    <div class="mt-6 p-4 bg-neutral-50 rounded-md">
      <h3 class="font-medium text-neutral-700 mb-2">测试状态 / Test Status:</h3>
      <div id="test-status" class="text-sm text-neutral-600">
        准备测试... / Ready to test...
      </div>
      
      <div class="mt-4">
        <h4 class="font-medium text-neutral-700 mb-2">系统状态 / System Status:</h4>
        <div class="flex items-center gap-2">
          <div id="system-status" class="w-2 h-2 bg-neutral-400 rounded-full"></div>
          <span class="text-sm text-neutral-600">检查中... / Checking...</span>
        </div>
      </div>
    </div>

    <!-- 测试按钮 -->
    <div class="mt-6 space-y-2">
      <button id="test-validation" class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600">
        测试表单验证 / Test Form Validation
      </button>
      <button id="test-api" class="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600">
        测试API连接 / Test API Connection
      </button>
      <button id="reset-form" class="w-full bg-neutral-500 text-white py-2 rounded-md hover:bg-neutral-600">
        重置表单 / Reset Form
      </button>
    </div>
  </div>

  <!-- 通知组件 -->
  <div id="notification" class="fixed top-4 right-4 z-40 hidden">
    <div class="bg-white border border-neutral-200 rounded-lg shadow-lg p-4 max-w-sm">
      <div class="flex items-center gap-3">
        <div id="notification-icon" class="flex-shrink-0"></div>
        <div>
          <p id="notification-message" class="text-sm font-medium"></p>
        </div>
        <button id="notification-close" class="flex-shrink-0 text-neutral-400 hover:text-neutral-600">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 引入脚本 -->
  <script src="/js/utils/api.js"></script>
  <script src="/js/utils/notification.js"></script>
  
  <script>
    // 简化的测试脚本
    document.addEventListener('DOMContentLoaded', () => {
      const testStatus = document.getElementById('test-status');
      const systemStatus = document.getElementById('system-status');
      
      // 测试API连接
      document.getElementById('test-api').addEventListener('click', async () => {
        testStatus.textContent = '测试API连接中... / Testing API connection...';
        
        try {
          const response = await api.get('/auth/status');
          testStatus.textContent = '✅ API连接成功 / API connection successful';
          systemStatus.className = 'w-2 h-2 bg-green-500 rounded-full';
          systemStatus.nextElementSibling.textContent = '系统正常 / System OK';
        } catch (error) {
          testStatus.textContent = '❌ API连接失败: ' + error.message;
          systemStatus.className = 'w-2 h-2 bg-red-500 rounded-full';
          systemStatus.nextElementSibling.textContent = '系统异常 / System Error';
        }
      });
      
      // 测试表单验证
      document.getElementById('test-validation').addEventListener('click', () => {
        testStatus.textContent = '测试表单验证... / Testing form validation...';
        
        // 模拟验证测试
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        
        if (!email || !password) {
          testStatus.textContent = '❌ 表单验证失败：缺少必填字段 / Form validation failed: missing required fields';
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
          testStatus.textContent = '❌ 表单验证失败：邮箱格式错误 / Form validation failed: invalid email format';
        } else if (password.length < 6) {
          testStatus.textContent = '❌ 表单验证失败：密码太短 / Form validation failed: password too short';
        } else {
          testStatus.textContent = '✅ 表单验证通过 / Form validation passed';
        }
      });
      
      // 重置表单
      document.getElementById('reset-form').addEventListener('click', () => {
        document.getElementById('login-form').reset();
        document.getElementById('email').value = 'admin@example.com';
        document.getElementById('password').value = 'admin123456';
        testStatus.textContent = '表单已重置 / Form reset';
      });
      
      // 初始化时检查API状态
      setTimeout(() => {
        document.getElementById('test-api').click();
      }, 1000);
    });
  </script>
</body>
</html>